.report-form {
  background-color: var(--main-bg);
  padding: 0.5rem 1rem;
}

.form-group {
  border: none;
  margin: 0;
  padding: 0;

  & + & {
    margin-top: 1rem;
  }
}

.crate-input {
  max-width: 440px;
  width: 100%;
}

.reasons-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: light-dark(white, #141413);
    border: 1px solid var(--gray-border);
    border-radius: var(--space-3xs);

    :global(input) {
        align-self: center;
    }

    &:global(.invalid) {
        background: light-dark(#fff2f2, #170808);
        border-color: red;
    }

    > * + * {
        border-top: inherit;
    }

    label {
        padding: var(--space-xs) var(--space-s);
        display: flex;
        flex-wrap: nowrap;
        gap: var(--space-xs);
        font-size: 0.9em;
    }
}

.detail {
  padding: var(--space-2xs);
  background-color: light-dark(white, #141413);
  border: 1px solid var(--gray-border);
  border-radius: var(--space-3xs);
  resize: vertical;
  width: 100%;

  &.invalid {
    background: light-dark(#fff2f2, #170808);
    border-color: red;
  }
}

.vulnerability-report {
    padding: var(--space-s) var(--space-s);
    background-color: light-dark(white, #141413);
    border: 1px solid var(--gray-border);
    border-radius: var(--space-3xs);
    width: 100%;

    :first-child {
        margin-top: 0;
    }

    :last-child {
        margin-bottom: 0;
    }
}

.buttons {
  position: relative;
  margin: var(--space-m) 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 2rem;
}

.report-button {
  border-radius: var(--space-3xs);
  font-weight: normal;

  &:focus {
    outline: 1px solid var(--bg-color-top-dark);
    outline-offset: 2px;
  }

  strong {
    margin-left: var(--space-3xs);
    font-weight: 500;
  }
}
